<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/css/style.css">
    <style>
		body{
			background-image: url('../static/images/经贸.png'); /* 替换 'background.jpg' 为你的背景图片路径 */
			background-size: cover;
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f4f4f4;
		}
		header {
		    background-color: #007bff;
		    color: #fff;
		    padding: 20px;
		}
		
		header h1 {
		    font-size: 50px;
		    margin-bottom: 10px;
			text-align: center;
		}
		nav ul {
		    list-style-type: none;
		}
		
		nav ul li {
		    display: inline;
		    margin-right: 20px;
		}
		
		nav ul li a {
		    color: #fff;
		    text-decoration: none;
			font-size: 20px;
		}
        /* Additional styles for My Favorites page */
        .favorites-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .favorite-item {
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
            display: flex;
            align-items: center;
        }

        .favorite-item:last-child {
            border-bottom: none;
        }

        .favorite-item .item-info {
            flex: 1;
        }

        .favorite-item .item-info h3 {
            margin-bottom: 5px;
            font-size: 18px;
        }

        .favorite-item .item-info p {
            margin-bottom: 10px;
            color: #666;
        }

        .favorite-item .item-actions {
            flex-shrink: 0;
        }

        .favorite-item .item-actions button {
            background-color: #007bff;
            color: #fff;
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s ease;
        }

        .favorite-item .item-actions button:hover {
            background-color: #0056b3;
        }
        .table thead th {
        background-color: #0056b3;
        color: white;
        }
        
        /* Center align text in table cells */
        .table th,
        .table td {
            text-align: center;
        }
        footer {
            background-color: #007bff;
            color: #fff;
            text-align: center;
            padding: 10px;
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
   {%include 'nav.html' %}
   <div class="container">
        <h2>我的收藏</h2>
        <!-- <section id="filter">
            <input type="text" placeholder="搜索商品">
            <select name="category">
                <option value="all">所有类别</option>
                <option value="books">图书</option>
                <option value="electronics">电子产品</option>
                <option value="clothes">服装</option>
            </select> -->
        <!-- </section> -->
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>商品ID</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品类别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="favoritesList">
                <!-- 商品数据将会在这里动态生成 -->
            </tbody>
        </table>
    </div>

    <!-- <div class="favorites-container">
        <div class="favorite-item">
                <div class="item-info">
                    <h3>ID 修改时间</h3>
                    <p>商品 ID: 283483</p>
                    <p>留言内容: 唱跳rap打篮球</p>
                    <p>是否可见: 是</p>
                </div>
                <div class="item-actions">
                    <button>查看详情</button>
                    <button>移除收藏</button>
                </div>
            </div>
         -->
        
        
    </div>

    <!-- <footer>
        <p>&copy; 2024 校园宝贝集市</p>
    </footer> -->

</body>
<script>
     var uid = "{{ session.get('username') }}";
    //列展商品信息
    $(document).ready(function () {
    // 使用 jQuery 发送 GET 请求获取商品数据
        $.getJSON('/favoritess', function (data) {
            // 遍历返回的数据，并动态生成表格行
            $.each(data, function (key, value) {
                var tr = $("<tr></tr>");
                $("<td></td>").text(value.id).appendTo(tr);
                $("<td></td>").text(value.name).appendTo(tr);
                $("<td></td>").text(value.price).appendTo(tr);
                $("<td></td>").text(value.sort).appendTo(tr);
                // $("<td></td>").text(value.uid).appendTo(tr);

                var td = $("<td></td>").appendTo(tr);
                $("<button></button>").text("详情").addClass("btn btn-primary btn-sm").click(function(){
                    // 编写修改商品的逻辑，例如弹出修改表单
                    // alert('修改商品: ' + value.id );
                    // 跳转到商品详情页面，传递商品ID作为参数
                    return render_template('Product_Details.html')
                    window.location.href = './Product_Details?id=' + value.id;
                    
                }).appendTo(td);
                $("<button></button>").text("删除").addClass("btn btn-danger btn-sm").click(function(){
                    // 编写下架商品的逻辑，例如确认框等
                    
                    // 跳转到商品详情页面，传递商品ID作为参数
                    // window.location.href = 'product-details.html?id=' + value.id;
                    alert('删除商品: ' + value.id );
                    
                }).appendTo(td);
                
                $("#favoritesList").append(tr);
            });
        });
    });
</script>
</html>
